import React from 'react';
import { Button } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

function DetailTest() {
    const navigate = useNavigate();

    const testData = {
        title: '测试详情页面',
        subtitle: '这是一个测试页面',
        image: 'https://img.freepik.com/free-vector/doctor-concept-illustration_114360-3993.jpg',
        description: '这是详情页面的测试内容，用于验证页面跳转和显示功能是否正常工作。',
        tags: ['测试', '详情', '功能验证'],
        extraInfo: '测试页面的额外信息，包含各种功能测试内容。'
    };

    return (
        <div style={{ 
            padding: '20px', 
            textAlign: 'center',
            backgroundColor: '#f5f5f5',
            minHeight: '100vh'
        }}>
            <h1 style={{ color: '#333', marginBottom: '30px' }}>
                详情页面功能测试
            </h1>
            
            <div style={{ 
                backgroundColor: '#fff', 
                padding: '20px', 
                borderRadius: '12px',
                marginBottom: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                <h3 style={{ color: '#1677ff', marginBottom: '15px' }}>
                    测试数据预览
                </h3>
                <div style={{ textAlign: 'left', marginBottom: '20px' }}>
                    <p><strong>标题：</strong>{testData.title}</p>
                    <p><strong>副标题：</strong>{testData.subtitle}</p>
                    <p><strong>描述：</strong>{testData.description}</p>
                    <p><strong>标签：</strong>{testData.tags.join(', ')}</p>
                    <p><strong>额外信息：</strong>{testData.extraInfo}</p>
                </div>
                
                <img 
                    src={testData.image} 
                    alt="测试图片" 
                    style={{ 
                        width: '200px', 
                        height: '150px', 
                        borderRadius: '8px',
                        marginBottom: '20px'
                    }} 
                />
            </div>

            <Button 
                color='primary' 
                size='large'
                onClick={() => navigate('/detail', { state: testData })}
                style={{ marginBottom: '15px' }}
            >
                跳转到详情页面
            </Button>
            
            <br />
            
            <Button 
                fill='outline'
                onClick={() => navigate('/home')}
            >
                返回首页
            </Button>
        </div>
    );
}

export default DetailTest;










